/*!
 * Cropper v3.0.0
 */

layui.config({
    base: '../../layuiadmin/layui/lay/modules/' //layui自定义layui组件目录
}).define(['jquery', 'layer', 'cropper'], function (exports) {
    var $ = layui.jquery
        , layer = layui.layer;
    var html1 = "<div id=\"cropper_Cover\" class=\"layui-fluid showImgEdit\" style=\"display: none\">\n" +
        "    <div class=\"layui-row layui-col-space15\">\n" +
        "        <div class=\"layui-col-xs9\" style=\"width: 70%;\">\n" +
        "            <div class=\"readyimg\" style=\"height:320px;background-color: rgb(247, 247, 247);\">\n" +
        "                <img src=\"\" >\n" +
        "            </div>\n" +
        "        </div>\n" +
        "        <div class=\"layui-col-xs3\">\n" +
        "            <div class=\"img-preview\" style=\"width:200px;height:200px;overflow:hidden\">\n" +
        "            </div>\n" +
        "        </div>\n" +
        "    </div>\n" +
        "    <div class=\"layui-row layui-col-space15\">\n" +
        "        <div class=\"layui-col-xs9\">\n" +
        "            <div class=\"layui-row\">\n" +
        "                <div class=\"layui-col-xs6\" style=\"width: auto;\">\n" +
        "                   <div class=\"layui-form-item\" style=\"margin-bottom:0;\">\n" +
        "                       <div class=\"layui-input-inline layui-btn-container\" style=\"width: auto !important;\">\n" +
        "                           <label for=\"cropper_avatarImgUpload1\" class=\"layui-btn layui-btn-primary\">\n" +
        "                               <i class=\"layui-icon\">&#xe67c;</i>选择图片\n" +
        "                           </label>\n" +
        "                           <input class=\"layui-upload-file\" id=\"cropper_avatarImgUpload1\" type=\"file\" value=\"选择图片\" name=\"file\">\n" +
        "                           <button id=\"but_left1\" type=\"button\" class=\"layui-btn layui-icon layui-icon-left\" cropper-event=\"rotate1\" data-option=\"-15\" title=\"Rotate -90 degrees\"> 向左旋转</button>\n" +
        "                           <button id=\"but_right1\" type=\"button\" class=\"layui-btn layui-icon layui-icon-right\" cropper-event=\"rotate1\" data-option=\"15\" title=\"Rotate 90 degrees\"> 向右旋转</button>\n" +
        "                           <button id=\"but_reset1\" type=\"button\" class=\"layui-btn\" cropper-event=\"reset1\" title=\"重置图片\">重置</button>\n" +
        "                       </div>\n" +
        "                   </div>\n" +
        "                </div>\n" +
        "            </div>\n" +
        "        </div>\n" +
        "        <div class=\"layui-col-xs3\">\n" +
        "            <button id=\"but_Save1\" class=\"layui-btn layui-btn-fluid\" cropper-event=\"confirmSave1\" type=\"button\"> 保存修改</button>\n" +
        "        </div>\n" +
        "    </div>\n" +
        "\n" +
        "</div>";
    var html2 = "<div id=\"cropper_Images\" class=\"layui-fluid showImgEdit\" style=\"display: none\">\n" +
        "    <div class=\"layui-row layui-col-space15\">\n" +
        "        <div class=\"layui-col-xs9\" style=\"width: 70%;\">\n" +
        "            <div class=\"readyimg\" style=\"height:320px;background-color: rgb(247, 247, 247);\">\n" +
        "                <img src=\"\" >\n" +
        "            </div>\n" +
        "        </div>\n" +
        "        <div class=\"layui-col-xs3\">\n" +
        "            <div class=\"img-preview\" style=\"width:200px;height:200px;overflow:hidden\">\n" +
        "            </div>\n" +
        "        </div>\n" +
        "    </div>\n" +
        "    <div class=\"layui-row layui-col-space15\">\n" +
        "        <div class=\"layui-col-xs9\">\n" +
        "            <div class=\"layui-row\">\n" +
        "                <div class=\"layui-col-xs6\" style=\"width: auto;\">\n" +
        "                   <div class=\"layui-form-item\" style=\"margin-bottom:0;\">\n" +
        "                       <div class=\"layui-input-inline layui-btn-container\" style=\"width: auto !important;\">\n" +
        "                           <label for=\"cropper_avatarImgUpload2\" class=\"layui-btn layui-btn-primary\">\n" +
        "                               <i class=\"layui-icon\">&#xe67c;</i>选择图片\n" +
        "                           </label>\n" +
        "                           <input class=\"layui-upload-file\" id=\"cropper_avatarImgUpload2\" type=\"file\" value=\"选择图片\" name=\"file\">\n" +
        "                           <button id=\"but_left2\" type=\"button\" class=\"layui-btn layui-icon layui-icon-left\" cropper-event=\"rotate2\" data-option=\"-15\" title=\"Rotate -90 degrees\"> 向左旋转</button>\n" +
        "                           <button id=\"but_right2\" type=\"button\" class=\"layui-btn layui-icon layui-icon-right\" cropper-event=\"rotate2\" data-option=\"15\" title=\"Rotate 90 degrees\"> 向右旋转</button>\n" +
        "                           <button id=\"but_reset2\" type=\"button\" class=\"layui-btn\" cropper-event=\"reset2\" title=\"重置图片\">重置</button>\n" +
        "                       </div>\n" +
        "                   </div>\n" +
        "                </div>\n" +
        "            </div>\n" +
        "        </div>\n" +
        "        <div class=\"layui-col-xs3\">\n" +
        "            <button id=\"but_Save2\" class=\"layui-btn layui-btn-fluid\" cropper-event=\"confirmSave2\" type=\"button\"> 保存修改</button>\n" +
        "        </div>\n" +
        "    </div>\n" +
        "\n" +
        "</div>";
    var html3 = "<div id=\"cropper_ImgUrl\" class=\"layui-fluid showImgEdit\" style=\"display: none\">\n" +
        "    <div class=\"layui-row layui-col-space15\">\n" +
        "        <div class=\"layui-col-xs9\" style=\"width: 70%;\">\n" +
        "            <div class=\"readyimg\" style=\"height:320px;background-color: rgb(247, 247, 247);\">\n" +
        "                <img src=\"\" >\n" +
        "            </div>\n" +
        "        </div>\n" +
        "        <div class=\"layui-col-xs3\">\n" +
        "            <div class=\"img-preview\" style=\"width:200px;height:200px;overflow:hidden\">\n" +
        "            </div>\n" +
        "        </div>\n" +
        "    </div>\n" +
        "    <div class=\"layui-row layui-col-space15\">\n" +
        "        <div class=\"layui-col-xs9\">\n" +
        "            <div class=\"layui-row\">\n" +
        "                <div class=\"layui-col-xs6\" style=\"width: auto;\">\n" +
        "                   <div class=\"layui-form-item\" style=\"margin-bottom:0;\">\n" +
        "                       <div class=\"layui-input-inline layui-btn-container\" style=\"width: auto !important;\">\n" +
        "                           <label for=\"cropper_avatarImgUpload3\" class=\"layui-btn layui-btn-primary\">\n" +
        "                               <i class=\"layui-icon\">&#xe67c;</i>选择图片\n" +
        "                           </label>\n" +
        "                           <input class=\"layui-upload-file\" id=\"cropper_avatarImgUpload3\" type=\"file\" value=\"选择图片\" name=\"file\">\n" +
        "                           <button id=\"but_left3\" type=\"button\" class=\"layui-btn layui-icon layui-icon-left\" cropper-event=\"rotate3\" data-option=\"-15\" title=\"Rotate -90 degrees\"> 向左旋转</button>\n" +
        "                           <button id=\"but_right3\" type=\"button\" class=\"layui-btn layui-icon layui-icon-right\" cropper-event=\"rotate3\" data-option=\"15\" title=\"Rotate 90 degrees\"> 向右旋转</button>\n" +
        "                           <button id=\"but_reset3\" type=\"button\" class=\"layui-btn\" cropper-event=\"reset3\" title=\"重置图片\">重置</button>\n" +
        "                       </div>\n" +
        "                   </div>\n" +
        "                </div>\n" +
        "            </div>\n" +
        "        </div>\n" +
        "        <div class=\"layui-col-xs3\">\n" +
        "            <button id=\"but_Save3\" class=\"layui-btn layui-btn-fluid\" cropper-event=\"confirmSave3\" type=\"button\"> 保存修改</button>\n" +
        "        </div>\n" +
        "    </div>\n" +
        "\n" +
        "</div>";
    var vArray = new Array(3);
    vArray[1] = html1;
    vArray[2] = html2;
    vArray[3] = html3;
    var obj = {
        render: function (e) {
            $('body').append(vArray[e.htmlcode]);
            var self = this,
                elem = e.elem,
                htmlName = e.htmlName,
                htmlcode = e.htmlcode,
                saveW = e.saveW,
                saveH = e.saveH,
                mark = e.mark,
                area = e.area,
                url = e.url,
                done = e.done;
            var content = $('#' + htmlName)
                , image = $("#" + htmlName + " .readyimg img")
                , preview = "#" + htmlName + " .img-preview"
                , file = $("#" + htmlName + " input[name='file']")
                , options = { aspectRatio: mark, preview: preview, viewMode: 1 };

            $(elem).on('click', function () {
                layer.open({
                    type: 1
                    , content: content
                    , area: area
                    , success: function () {
                        image.cropper(options);
                    }
                    , cancel: function (index) {
                        layer.close(index);
                        image.cropper('destroy');
                    }
                });
            });
            $(".layui-btn").on('click', function () {
                var event = $(this).attr("cropper-event");
                //监听确认保存图像
                if (event === 'confirmSave' + htmlcode) {
                    image.cropper("getCroppedCanvas", {
                        width: saveW,
                        height: saveH
                    }).toBlob(function (blob) {
                        var formData = new FormData();
                        formData.append('file', blob, 'head.jpg');
                        $.ajax({
                            method: "post",
                            url: url, //用于文件上传的服务器端请求地址
                            data: formData,
                            processData: false,
                            contentType: false,
                            before: function (obj) {
                                layer.load();
                            },
                            success: function (result) {
                                if (result.code === 0) {
                                    layer.msg(result.msg, { icon: 1 });
                                    layer.closeAll('page');
                                    return done(result.data.src);
                                } else if (result.code === -1) {
                                    layer.alert(result.msg, { icon: 2 });
                                }
                                layer.closeAll('loading');
                            }
                        });
                    });
                    //监听旋转
                } else if (event === 'rotate' + htmlcode) {
                    var option = $(this).attr('data-option');
                    image.cropper('rotate', option);
                    //重设图片
                } else if (event === 'reset' + htmlcode) {
                    image.cropper('reset');
                }
                //文件选择
                file.change(function () {
                    var r = new FileReader();
                    var f = this.files[0];
                    r.readAsDataURL(f);
                    r.onload = function (e) {
                        image.cropper('destroy').attr('src', this.result).cropper(options);
                    };
                });
            });
        }

    };
    exports('croppers', obj);
});